<template>
	<view class="content p-bot300" :style="{'--color':color}">
		<status-bar :title='title' :back="back"></status-bar>
		<block v-if="delivery_type == 0">
			<view class="viewbox auto bor_radius_10 unreceipt_addr choose_wxaddr m-top20" v-if='!addDetail.Aaddress '
				@click="toUrl(`/orderPage/Addresslist/Addresslist`)">
				<text class="unreceipt_addr_text">添加收货地址</text>
			</view>
			<orderAddress v-else :addDetail="addDetail" @package1="packages = 1" @package2="packages = 2"
				@addr_pop_isshow="addr_pop_isshow=true"></orderAddress>
		</block>


		<view class="viewbox auto m-top20">
			<Store :pageData="deposit" @storeItem="currentStore" :shop_id="shop_id" showType="1"></Store>
		</view>

		<block v-for="(item,index) in pageData" :key="item.id">
			<view class="viewbox auto m-top20 bgwhite padding20 d-flex bor_radius_10 ">
				<view class="product_Img f-shrink-0 p-re">
					<image :src="$imgUrls(item.pdtimg)" mode="aspectFill" class="bor_radius_10"></image>
					<view class="h7 white numId p-top4 p-bot4 p-left14 p-right14">{{item.id}}</view>
				</view>
				<view class="d-flex f-column m-left30 j-sb">
					<text class="color_33 size30 ellipsis">{{item.pdtname}}</text>
					<view class="d-flex" v-if="item.pdt_spec">
						<text class="color_99 h6 f-shrink-0">规格：</text>
						<text class="color_33 h6 m-left10 ellipsis">{{item.pdt_spec}}</text>
					</view>
					<view class="d-flex">
						<text class="color_99 h6">数量：</text>
						<text class="color_33 h6 m-left10">X{{item.pdt_num}}</text>
					</view>
				</view>
			</view>

			<!--  选择包装 -->
			<view class="viewbox auto bgwhite bor_radius_10  p-top30 p-bot30 p-left20 d-flex j-sb a-center" v-if="item.packings">
				<text class="color_20 size30">选择包装</text>
				<view class="d-flex a-center m-right50">
					<block v-for="(itm,inx) in item.packings" :key="inx">
						<view class="d-flex a-center m-left40 m-right40" @click="packagesBtn(item.packages,itm,index)">
							<view class="Package d-flex a-center j-centert" :class="{packActive: item.packages == itm}">
								<view class="iconfont icon-xuanzhong h6"></view>
							</view>
							<text class="h6 color_33 m-left16">{{itm}}</text>
						</view>
					</block>

				</view>
			</view>
		</block>
		<!-- 	<chickOrder :pageData="pageData"></chickOrder> -->


		<view class="viewbox auto bgwhite bor_radius_10 m-top20">
			<view class="list bot" v-if="allrefund_num > 0">
				<text class="color_33 size28">退桶数</text>
				<view class="refund">
					<view class="iconfont icon-jianshao2 size50  refundIcon" :class="refund_num >0?'color_33':'color_cc'"
						@click="subBarrel"></view>
					<text class="refund_num">{{refund_num}}</text>
					<view class="iconfont icon-zengjia1 size50 refundIcon"
						:class="refund_num < allrefund_num?'color_33':'color_cc'" @click="addBarrel"></view>
				</view>
			</view>
			<view class="list bot p-right20" v-if="Deposits == 1">
				<text class="color_33 size28">桶押金</text>
				<view class="money color_ff2">
					<text class="size26">￥</text>
					<text class="size36">{{deposit.deposit_money}}</text>
				</view>
			</view>
			<view class="list bot p-right20">
				<view class="d-flex a-center">
					<text class="color_33 size28">运费</text>
					<text class="h6 color_99 m-left10"
						v-if="shopInfo">基础:{{shopInfo.express_price}}+超距:{{shopInfo.extra_express_price}}</text>
				</view>

				<view class="money color_ff2">
					<text class="size26">￥</text>
					<text class="size36">{{deposit.delivery_fee}}</text>
				</view>
			</view>


			<view class="list  p-right20">
				<text class="color_33 size28">备注</text>
				<input type="text" v-model="Remark" class="flex-1 size26 text-right p-left10" placeholder="建议留言前先与商家沟通确认额~" />
			</view>

		</view>


		<view class="viewbox auto bgwhite bor_radius_10 m-top20">
			<view class="list bot p-right20">
				<text class="color_ff2 size32 bold">总价</text>
				<view class="money color_ff2">
					<text class="size26">￥</text>
					<text class="size36">{{deposit.payment}}</text>
				</view>
			</view>
		</view>



		<!--  配送须知 -->
		<!-- 	<deliveryNotice :instructions=""></deliveryNotice> -->
		<view class="viewbox auto m-top20">
			<view class="color_33 h6 bold">配送须知：</view>
			<view class="rows f-column m-top20">
				<rich-text :nodes="instructions"></rich-text>
			</view>
		</view>

		<view class="viewbox auto d-flex j-sa fixedBtn">
			<view class="bot_btn d-flex cancel j-centert a-center size36 color_80" @click="$common.back(1)">没想好</view>
			<view class="bot_btn d-flex bgcolor j-centert a-center size36 bold white" @click="Sure_Btn()">确定</view>
		</view>



	</view>
</template>

<script>
	import { mapState } from 'vuex';
	import chickOrder from '../warehouse/components/chickOrder.vue'
	import orderAddress from '../warehouse/components/orderAddress.vue'
	import deliveryNotice from '../warehouse/components/deliveryNotice.vue'
	import Store from '@/components/details/Store.vue'
	export default {
		components: {
			chickOrder,
			orderAddress,
			deliveryNotice,
			Store
		},
		data() {
			return {
				title: '快递到家',
				imgUrl: this.imgUrl,

				navHeight: getApp().globalData.navHeight,

				packages: 1, // 包装方式 1、生鲜鸡 2、礼品盒
				Remark: '', // 备注

				addDetail: {},
				addList: [], // 收货地址列表
				addr_pop_isshow: false,
				ids: '',
				id: [],
				keycode: [],
				pageData: [],
				instructions: '', // 配送须知
				refund_num: 0,
				Deposits: 0,
				allrefund_num: 0,
				deposit: '', // 押金信息
				Flag: true,
				delivery_type: 0, // 0 线上 1 线下
				shop_id: '',
				shopInfo: null,

			}
		},
		onLoad(e) {
			let that = this;
			if (e.shop_id) that.shop_id = e.shop_id;
			if (e.ids) that.ids = e.ids;
			if (e.delivery_type) {
				that.delivery_type = e.delivery_type;
				that.title = "支付";
			};
			console.log(that.ids)
		},
		onShow() {
			let that = this;
			if (that.delivery_type == 0) {
				that.getAddress();
				that.getOldAddress();
			}
			that.getGiveGoodsInfo();

		},

		methods: {

			packagesBtn(type, typeson, index) {
				let that = this;
				that.$set(that.pageData[index], 'packages', typeson);
			},
			getGiveGoodsInfo() {
				let that = this;
				that.$http.post({
					url: '/singleSaleWarehouseApi/getGiveGoodsInfo',
					data: {
						ids: that.ids,

					}
				}).then(res => {
					if (res.errcode != '100') return that.Toast(res.msg);
					const result = res.data || [];
					that.instructions = res.instructions;
					that.refund_num = res.refund_num;
					that.allrefund_num = res.refund_num;
					that.Deposits = res.deposit;
					result.forEach((item, index) => {
						if (item.packing) {
							let packing = item.packing.split(',');
							that.$set(item, 'packings', packing);
							that.$set(item, 'packages', item.packings[0])
						}
						that.keycode.push(item.keycode)
						that.id.push(item.id)
					})
					that.getDepositPayFee();
					that.pageData = result;
				})
			},
			getDepositPayFee() {
				if (!this.Flag) return;
				this.Flag = false;
				this.$http.post({
					url: '/WaterApi/getDepositPayFee',
					data: {
						checkid: this.ids,
						refund_num: this.refund_num,
						delivery_type: this.delivery_type,
						delivery_store_id: this.shop_id,
						shop_id: this.shop_id,
						address_id: this.addDetail.address_id,
					}
				}).then(res => {
					this.Flag = true;
					if (res.code != 200) return this.$Toast(res.msg);
					const result = res.data;
					if (result.shopInfo) this.shopInfo = result.shopInfo;

					this.deposit = result;
				})
			},
			currentStore(e) {
				if (this.shop_id == e.shop_id) return;
				this.shop_id = e.shop_id;
				this.getDepositPayFee();
			},
			subBarrel() {
				if (this.refund_num > 0) {
					this.refund_num--;
					this.getDepositPayFee();
					return;
				}
			},
			addBarrel() {
				if (this.refund_num < this.allrefund_num) {
					this.refund_num++;
					this.getDepositPayFee();
					return
				}
			},
			Sure_Btn() {
				if (!this.addDetail.Aaddress && this.delivery_type == 0) return this.$Toast('请添加收货地址！');
				this.$showLoading('');
				this.$http.post({
					url: '/WaterApi/getDepositPay',
					data: {
						checkid: this.ids,
						refund_num: this.refund_num,
						name: this.addDetail.Aname ? this.addDetail.Aname : '',
						phone: this.addDetail.Amobile ? this.addDetail.Amobile : '',
						address: this.addDetail.Aregion + this.addDetail.Aaddress,
						remarks: this.Remark,
						delivery_type: this.delivery_type,
						shop_id: this.shop_id,
						delivery_store_id: this.shop_id,
						address_id: this.addDetail.address_id,
					}
				}).then(res => {
					this.$hideLoading();
					if (res.code != '100') return this.$Toast(res.msg);
					const result = res.data;
					if (!result) {
						this.$Toast(res.msg);
						this.$back(2);
						return;
					};
					if (result.extraData) {
						wx.openEmbeddedMiniProgram({
							appId: result.appId,
							extraData: result.extraData
						});
					} else {
						this.$pop.getPayment(result).then(pay => {
							this.$back(2);
						});
					}


				})
			},

			getOldAddress() {
				let that = this;
				that.$http.get({
					url: '/SRA_simMallApi/getOldAddress',
					data: {
						type: 3
					}
				}).then(res => {
					if (res.code == '100' && res.data) {
						that.addDetail = res.data
					}
				})
			},
			//  获取我的地址
			getAddress() {
				let that = this;
				that.$http.get({
					url: '/zzj_singleSaleApi/getAddress',
				}).then(res => {
					if (res.code == '100' && res.data) {
						that.addList = res.data
					}
				})
			},
			addAddress(editId) {
				let that = this;
				let param = '';
				if (editId)
					param += '&editId=' + editId
				if (that.goods_id)
					param += '&goods_id=' + that.goods_id
				if (that.goods_num)
					param += '&goods_num=' + that.goods_num
				if (that.car_id)
					param += '&car_id=' + that.car_id
				if (that.group_id)
					param += '&group_id=' + that.group_id
				if (that.open_group)
					param += '&open_group=' + that.open_group
				if (that.specs)
					param = param + '&specs_bind_id=' + that.specs.specs_bind_id + '&specs_bind_text=' + that.specs.specs_bind_text
				console.log(param)
				uni.navigateTo({
					url: '/orderPage/order/addAddress?page_type=3' + param
				})
			},
			chooseAdd(id) { // 选择收货地址
				let that = this;
				that.addr_pop_isshow = false;
				that.getCurrAdd(id);
			},
			getCurrAdd(id) { //获取选择的地址
				let that = this;
				that.$http.get({
					url: '/zzj_singleSaleApi/obtainAddress',
					data: {
						id: id
					}
				}).then(res => {
					if (res.code == 100 && res.data) {
						that.Aregion = res.data.Aregion;
						that.addDetail = res.data;
					}
				})
			},

		},
		computed: {
			...mapState(['color', 'vid', 'bid']),
			// currentShop_id() {
			// 	return this.selectedShopId || (this.shops && this.shops.length > 0 ? this.shops[0].shop_id : null);
			// },
			// storeItem() {
			// 	if (!this.shops || !this.currentShop_id) return null;
			// 	const result = this.shops.find(n => n.shop_id == this.currentShop_id);
			// 	return result;
			// }
		}
	}
</script>

<style lang="scss">
	page {
		background: #f7f9fa;
	}

	.maskBg {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		background: #FFFFFF;
	}

	.emptyPage {
		background: #FFFFFF;
	}

	.fixedBtn {
		position: fixed;
		bottom: 100rpx;
		left: 50%;
		transform: translate(-50%, 0);
		z-index: 1000;
	}

	.bot_btn {
		width: 310rpx;
		height: 100rpx;
		border-radius: 50rpx;
		-webkit-border-radius: 50rpx;
	}

	.cancel {
		background: #f1f1f1;
	}

	.addr_pop_ftr {
		width: 100%;
		padding: 30upx 0;
		background: #ffffff;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 1;
		padding-bottom: calc(30rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
	}

	.addr_list {
		overflow-x: hidden;
		background: #FFFFFF;
		-webkit-overflow-scrolling: touch;

		.addr_item {
			height: 157upx;
			border-bottom: 1px solid #dddddd;
			padding: 0 30upx;
			position: relative;

			.addr_info_c {
				overflow: hidden;
				text-overflow: ellipsis;
				color: #666666;
			}

			.addr_info_h {
				overflow: hidden;
				text-overflow: ellipsis;
				margin-bottom: 15upx;
				font-size: 36upx;
				font-family: arial;
			}
		}
	}

	.product_Img {
		width: 140rpx;
		height: 140rpx;
	}

	.numId {
		position: absolute;
		right: 0;
		top: 0;
		background: var(--color);
		border-radius: 0 10rpx 0 10rpx;
	}

	.Package {
		width: 30rpx;
		height: 30rpx;
		border: 1rpx solid #CCCCCC;
		border-radius: 50%;
		-webkit-border-radius: 50%;
	}

	.packActive {
		border: 1rpx solid var(--color) !important;
		background: var(--color) !important;
	}

	.list {
		width: 100%;
		height: 92rpx;
		padding-left: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.refund {
		height: 100%;
		display: flex;
		align-items: center;
	}

	.refundIcon {
		padding: 14rpx;
	}

	.refund_num {
		width: 62rpx;
		font-weight: bold;
		color: #000;
		font-size: 28rpx;
		text-align: center;
	}

	.money {
		display: flex;
		align-items: center;

	}

	.List {
		width: 690rpx;
		margin: 20rpx auto;
		background-color: #fff;
		padding: 20rpx 10rpx;
		display: flex;
		align-items: center;
		border-radius: 10rpx;
	}

	.logoBox,
	.logo {
		width: 80rpx;
		height: 80rpx;
		border-radius: 6rpx;
	}
</style>